<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

	<title>Menu System Test (steel)</title>

	<link rel="stylesheet" href="../../../../dojo/dojo/resources/dojo.css">
	<link rel="stylesheet" href="../../../../dojo/dijit/tests/css/dijitTests.css">
	<style type="text/css">
		.widgetContainer {
		padding-top: 10px;
	}
	.testTitle {
		padding-bottom: 10px;
	}
	
	body {
		padding-top: 60px;
	}
	.somePadding .dijitAccordionBody {
		padding: 5px;
	}
	.extremePadding .dijitAccordionBody {
		padding: 50px;
	}
	
	</style>

	<!-- required: a default dijit theme: -->
	<link id="themeStyles" rel="stylesheet" href="../../themes/steel/SteelBase.css">

	<!-- required: dojo.js -->
	<script type="text/javascript" src="../../../../dojo/dojo/dojo.js"
		djConfig="parseOnLoad: true, isDebug: true"></script>

	<!-- not needed, for testing alternate themes -->
	<script type="text/javascript" src="../../../../dojo/dijit/tests/_testCommon.js"></script>

	<script language="JavaScript" type="text/javascript">
		dojo.require("dijit.dijit"); // optimize: load dijit layer
		dojo.require("dijit.Menu");
		dojo.require("dijit.MenuItem");
		dojo.require("dijit.PopupMenuItem");
		dojo.require("dijit.MenuBar");
		dojo.require("dijit.MenuBarItem");
		dojo.require("dijit.PopupMenuBarItem");
		dojo.require("dijit.MenuSeparator");
		dojo.require("dijit.ColorPalette");
		dojo.require("dojo.parser");	// scan page for widgets and instantiate them
	</script>
    <script language="Javascript" type="text/javascript">
	    /* Popup Menu Open on Hover */
	    (function() {
	    	dijit.Menu.prototype.allowSubmenuHover = true;
	    	dijit.Menu.prototype.popupDelay = 500;
	    	dijit.Menu.prototype.onItemHover = function(item) {
	    		if(this.isActive || this.allowSubmenuHover) {
	    			this.focusChild(item);
	    			if(this.focusedChild.popup && !this.focusedChild.disabled && !this.hover_timer){
	    				this.hover_timer = setTimeout(dojo.hitch(this, '_openPopup'), this.popupDelay);
	    			}
	    		}
	    		if(this.focusedChild){
	    			this.focusChild(item);
	    		}
	    		this._hoveredChild = item;
	    	};
	    })();
	    /* popup hover patch end */
	   	dojo.extend(dijit.Menu,{
	   		onOpen: function(/*Event*/ e){
	   	    	// summary:
	   	    	//            Callback when this menu is opened.
	   	    	//            This is called by the popup manager as notification that the menu
	   	    	//            was opened.
	   	    	// tags:
	   	    	//            private
	   	    	this.isShowingNow = true;
	   	    	this._markActive();
	   	    	console.log("INFO:: Modified onOpen method called!");
	   		},
	   		onClose: function(){
	   			// summary:
	   			//            Callback when this menu is closed.
	   			//            This is called by the popup manager as notification that the menu
	   			//            was closed.
	   			// tags:
	   			//            private
		   		this._stopFocusTimer();
		   	    this._markInactive();
		   	    this.isShowingNow = false;
		   	    this.parentMenu = null;
		   	 	console.log("INFO:: Modified onClose method called!");
		   	}
		});

		
		dojo.addOnLoad(function(){
			dojo.connect(dijit.byId("submenu2"),"onOpen", function(evt){
				console.log("INFO --> submenu2 onOpen called!");
			});
			dojo.connect(dijit.byId("submenu2"),"onClose", function(evt){
				console.log("INFO --> submenu2 onClose called!");
			});
			
		});
    </script>
</head>
<body class="steel">
<div class="widgetContainer">
	<div dojoType="dijit.Menu" id="navMenu" style="">
    <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut"
    onClick="alert('drama!')">
        Drama
    </div>
    <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy"
    onClick="alert('comedy!')">
        Comedy
    </div>
    <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconPaste"
    onClick="alert('romance!')">
        Romance
    </div>
    <div dojoType="dijit.MenuSeparator">
    </div>
    <div dojoType="dijit.PopupMenuItem">
        <span>
            Action
        </span>
        <div dojoType="dijit.Menu" id="submenu2">
            <div dojoType="dijit.MenuItem" onClick="alert('diehard!')">
                Diehard
            </div>
            <div dojoType="dijit.MenuItem" onClick="alert('indiana!')">
                Indiana Jones
            </div>
        </div>
    </div>
</div>
</div>
</body>
</html>